<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>
Leightbox
</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />

<!-- CSS -->
<link rel="stylesheet" href="css/screen.css" media="screen,projection" type="text/css" />

<!-- JavaScript -->
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>

</head>

<body>

<div id="container">

	<h1>Leightbox</h1>

	<p>
		I've changed ParticleTree's lightbox functionality to allow
		the use of inline div's instead of AJAX calls. Very often I find that I want the data
		in the lightbox to be indexable by search engines and visible to people with screenreaders etc.
		This adaptation makes that possible. Mind you, i've completely removed the AJAX calls.
	</p>

	<p>
		<ul>
			<li><a href="#lightbox1" rel="lightbox1" class="lbOn">Leightbox 1</a></li>
			<li><a href="#lightbox2" rel="lightbox2" class="lbOn">Leightbox 2</a></li>
			<li><a href="#lightbox3" rel="lightbox3" class="lbOn">Leightbox 3</a></li>
		</ul>
	</p>

	<p class="footer">
		<a href="leightbox.zip" title="Paging Files">Download Source</a>

		&middot;

		Simon de Haan

		&middot;

		<a href="http://www.eight.nl">Eight Media</a>


		&middot;


		The Netherlands
	</p>

</div><!--container-->

<div id="lightbox1" class="leightbox">

	<h1>Leightbox 1</h1>

	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec aliquet. Donec sit amet elit at nisl commodo pellentesque. Proin vel odio. Proin vitae mi eu libero consequat rhoncus. Pellentesque aliquam varius purus. Etiam ac mauris sit amet purus facilisis dapibus. Nulla tellus. In aliquam sem. Duis nisi velit, scelerisque egestas, feugiat id, suscipit et, mi. Vestibulum id erat eu enim nonummy fringilla.</p>

	<p class="footer">
		<a href="#" class="lbAction" rel="deactivate">Close</a>
	</p>
</div>

<div id="lightbox2" class="leightbox">

	<h1>Leightbox 2</h1>

	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec aliquet. Donec sit amet elit at nisl commodo pellentesque. Proin vel odio. Proin vitae mi eu libero consequat rhoncus. Pellentesque aliquam varius purus. Etiam ac mauris sit amet purus facilisis dapibus. Nulla tellus. In aliquam sem. Duis nisi velit, scelerisque egestas, feugiat id, suscipit et, mi. Vestibulum id erat eu enim nonummy fringilla.</p>

	<p> Etiam fermentum. Aenean aliquam erat sit amet ante eleifend consequat. Pellentesque aliquam eros eu sapien. Donec urna leo, sagittis ut, semper at, tristique eget, risus. Vivamus et dui egestas elit pulvinar facilisis. Maecenas arcu ligula, sollicitudin at, dictum vitae, vestibulum in, enim. Morbi luctus risus ut ante. Ut id lorem facilisis felis vehicula eleifend. Aliquam erat volutpat. Ut at arcu. Integer elementum congue nibh. In eros est, sollicitudin at, tempus ut, mollis vel, nisl. Nulla nisl risus, varius vitae, suscipit ut, sodales a, risus. Quisque sit amet dui viverra nunc tincidunt vehicula. Pellentesque vitae ipsum vel justo euismod blandit. Nullam molestie ligula quis sem eleifend rhoncus. </p>

	<p> Nulla turpis. Fusce lacinia, enim non egestas pulvinar, purus mauris dictum nunc, in malesuada tellus nulla in velit. Nulla arcu lectus, eleifend sed, tempus quis, cursus at, libero. Cras faucibus elit id quam. Nullam libero ante, convallis id, feugiat ut, rutrum eget, metus. Sed dolor. Curabitur lectus tellus, nonummy eget, semper eget, tristique vitae, sapien. Vivamus sit amet pede et sem tincidunt congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin in orci ut urna posuere accumsan. Praesent metus augue, lobortis ac, laoreet in, porta eget, magna. Aliquam adipiscing sapien quis diam. Integer dolor ipsum, porttitor eu, convallis ac, lacinia ut, elit. Phasellus lacus. Maecenas elit. </p>

	<p> Suspendisse potenti. Aliquam semper varius tortor. Donec faucibus. Duis sed eros ac quam sodales viverra. Fusce viverra. Phasellus non lectus. Aenean quis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dapibus eros quis nisi pellentesque imperdiet. Integer nisl diam, varius non, dignissim in, aliquet sed, tortor. Suspendisse vitae velit. Quisque pulvinar pede ut ligula. In hac habitasse platea dictumst. </p>

	<p> Quisque ultrices accumsan ante. Nulla dolor. Mauris est dui, volutpat hendrerit, sagittis at, luctus quis, ante. Donec congue nunc sit amet leo. Aenean dictum condimentum ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam leo lacus, nonummy nec, luctus ut, ornare ac, augue. Vestibulum dignissim molestie justo. Nunc eu neque. Aliquam egestas, mauris non pretium dignissim, orci urna tincidunt odio, sed convallis ante lacus vel ante. Maecenas orci. Phasellus quis arcu. Phasellus in arcu. Nam porttitor risus eu mi. Phasellus velit. Integer ultricies varius enim. Vestibulum non sapien id libero convallis fermentum. Aliquam nunc odio, aliquet nec, tincidunt sit amet, consequat in, felis. </p>

	<p class="footer">
		<a href="#" class="lbAction" rel="deactivate">Close</a>
	</p>
</div>

<div id="lightbox3" class="leightbox">

	<h1>Leightbox 3</h1>

	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec aliquet. Donec sit amet elit at nisl commodo pellentesque. Proin vel odio. Proin vitae mi eu libero consequat rhoncus. Pellentesque aliquam varius purus. Etiam ac mauris sit amet purus facilisis dapibus. Nulla tellus. In aliquam sem. Duis nisi velit, scelerisque egestas, feugiat id, suscipit et, mi. Vestibulum id erat eu enim nonummy fringilla.</p>

	<p> Etiam fermentum. Aenean aliquam erat sit amet ante eleifend consequat. Pellentesque aliquam eros eu sapien. Donec urna leo, sagittis ut, semper at, tristique eget, risus. Vivamus et dui egestas elit pulvinar facilisis. Maecenas arcu ligula, sollicitudin at, dictum vitae, vestibulum in, enim. Morbi luctus risus ut ante. Ut id lorem facilisis felis vehicula eleifend. Aliquam erat volutpat. Ut at arcu. Integer elementum congue nibh. In eros est, sollicitudin at, tempus ut, mollis vel, nisl. Nulla nisl risus, varius vitae, suscipit ut, sodales a, risus. Quisque sit amet dui viverra nunc tincidunt vehicula. Pellentesque vitae ipsum vel justo euismod blandit. Nullam molestie ligula quis sem eleifend rhoncus. </p>

	<p class="footer">
		<a href="#" class="lbAction" rel="deactivate">Close</a>
	</p>


</div>
	
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
	</script>
	<script type="text/javascript">
	_uacct = "UA-184511-1";
	urchinTracker();
	</script>
</body>
</html>